<!-- 网络类型列表显示 -->
<template>
  <div>
    <table>
    <div class="container">
      <table>
        <tr>
          <td>
            网络类型名称：
            <el-input v-model="ShowMeshTypeData.meshTypeName" style="width: 240px" placeholder="网络类型名称" />
          </td>

        </tr>
        <tr>
          <td>&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
            <el-button type="primary" @click="fetchData()">搜索</el-button>
            <el-button type="warning">重置</el-button>
          </td>
        </tr>
      </table>
    </div>

    <div>
      <el-button type="success" plain @click="dialogVisible = true">+ 新增</el-button>

      <el-table :data="tableData" style="width: 100%; " :row-class-name="tableData">
        <el-table-column prop="meshTypeName" label="网络类型名称" width="280" />
        <el-table-column prop="meshType" label="网络类别" width="280" />
        <el-table-column prop="majorType" label="专业网络" width="280" />

        <el-table-column label="操作" width="280">
          <template v-slot="scope">
            <el-link type="danger" @click="deleteMeshTypeInfo(scope.row.meshTypeId)">删除</el-link>&emsp;
            <el-link type="success" @click="BackMeshTypeInfo(scope.row.meshTypeId)">编辑</el-link>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页方法           :small="small" :disabled="disabled" :background="background"      -->
      <div class="demo-pagination-block">
        <el-pagination v-model:current-page="pageIndex" v-model:page-size="pageSize" :page-sizes="[10, 15, 20, 25]"
          layout="total, sizes, prev, pager, next, jumper" :total="totalCount" @size-change="handleSizeChange"
          @current-change="handleCurrentChange" />
      </div>

      <!-- :before-close="handleClose"  注释点击取消弹出层的确认操作 -->
      <!--弹出层控件-->
      <el-dialog v-model="dialogVisible" title="添加网络类型管理" width="500">
        <span>
          <!--弹出层下的表单-->
          <el-form ref="ruleFormRef" style="max-width: 600px" :model="ruleForm" :rules="rules" label-width="auto"
            class="demo-ruleForm" status-icon>
            <el-form-item label="网络类型名称" prop="meshTypeName">
              <el-input v-model="ruleForm.meshTypeName" />
            </el-form-item>

            <el-form-item label="网络类型" prop="meshType">
              <el-select v-model="ruleForm.meshType" placeholder="网络类型">
                <el-option label="物理网格" value="物理网格" />
              </el-select>
            </el-form-item>

            <el-form-item label="专业网格" prop="majorTypeArr">
              <el-checkbox-group v-model="ruleForm.majorTypeArr">
                <el-checkbox value="环保" label="环保">环保</el-checkbox>
                <el-checkbox value="城管" label="城管">城管</el-checkbox>
                <el-checkbox value="公安" label="公安">公安</el-checkbox>
                <el-checkbox value="综治" label="综治">综治</el-checkbox>
                <el-checkbox value="党建" label="党建">党建</el-checkbox>
                <el-checkbox value="园林" label="园林">园林</el-checkbox>
                <el-checkbox value="环卫" label="环卫">环卫</el-checkbox>
              </el-checkbox-group>
            </el-form-item>

            <el-form-item>
              <el-button type="primary" @click="submitForm(ruleFormRef)">
                保存
              </el-button>
              <el-button @click="resetForm(ruleFormRef)">清空</el-button>
            </el-form-item>
          </el-form>
        </span>
      </el-dialog>
    </div>
  </table>
  </div>
</template>

<script setup lang="ts">
//引入axios
import axios from 'axios';
//引入组件
import { ref, reactive, onMounted } from "vue";
//引入弹出层  //引入提示框：ElMessage
import { ElMessageBox, ElMessage } from 'element-plus'
//引用表单
import type { ComponentSize, FormInstance, FormRules } from 'element-plus'
//引入表单非空验证
const ruleFormRef = ref<FormInstance>()
//定义一个弹出层默认是false
const dialogVisible = ref(false)

//定义添加的表单
const ruleForm = reactive({
  meshTypeId: 0,
  meshTypeName: "",
  meshType: "",
  majorType: "",
  majorTypeArr: [],
  createBy:localStorage.getItem("User"),
})


//添加的非空验证
const rules = reactive<FormRules>({
  meshTypeName: [
    { required: true, message: '请输入网络类型名称', trigger: 'blur' },
  ],
  meshType: [
    {
      required: true,
      message: '请输入网络类型',
      trigger: 'change',
    },
  ],
  majorTypeArr: [
    {
      type: 'array',
      required: true,
      message: '请至少选择一个专业网络',
      trigger: 'change',
    },
  ],
})

//关于分页
const tableData = ref([])
const pageIndex = ref(1)
const pageSize = ref(10)
const totalCount = ref(0)
const pageCount = ref(0)

//条件查询的表单
const ShowMeshTypeData = reactive({
  meshTypeName: "",  //查询条件网络类型名称
});




//分页的方法 页容量
const handleSizeChange = (val: number) => {
  pageSize.value = val
  fetchData()
}  //页索引
const handleCurrentChange = (val: number) => {
  pageIndex.value = val
  fetchData()
}

//异步显示列表
const fetchData = async () => {
  try {
    //response
    const res = await axios.get('http://47.95.178.186:8000/GetLiGriddingRout/api/MeshType/PageShowCottage', {
      params: {
        PageIndex: pageIndex.value,
        PageSize: pageSize.value,
        MeshTypeName: ShowMeshTypeData.meshTypeName
      }
    })

    tableData.value = res.data.data
    totalCount.value = res.data.totalCount
    pageCount.value = res.data.pageCount
  } catch (error) {
    console.error(error)
  }
}
//首次加载显示列表信息
onMounted(() => {
  fetchData();
})

//点击提交按钮  添加和修改
const submitForm = async (formEl: FormInstance | undefined) => {
  if (ruleForm.meshTypeId == 0) {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
      if (valid) {
        //      http://10.31.60.18:8000/SetLiGriddingRout/api/MeshType/CreateMestType
        console.log(ruleForm)
        ruleForm.majorType = ruleForm.majorTypeArr.join(','); 
        axios.post("http://47.95.178.186:8000/SetLiGriddingRout/api/MeshType/CreateMestType", ruleForm).then(res => {
          if (res.data > 0) {
            ElMessage.success("添加成功！");
            dialogVisible.value = false;
            fetchData();
          }
          else {
            ElMessage.error("添加失败！");
          }
        })

      } else {
        console.log('error submit!', fields)
      }
    })
  } else {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
      if (valid) {
        ruleForm.majorType = ruleForm.majorTypeArr.join(',');
        //http://10.31.60.18:8000/SetLiGriddingRout/api/MeshType/UpdateMestType
        axios.put("http://47.95.178.186:8000/SetLiGriddingRout/api/MeshType/UpdateMestType", ruleForm).then(res => {
          if (res.data > 0) {
            ElMessage.success("更新成功！");
            dialogVisible.value = false;
            fetchData();
          }
          else {
            ElMessage.error("更新失败！");
          }
        })

      } else {
        console.log('error submit!', fields)
      }
    })
  }

}
//清空按钮
const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}

//单个逻辑删除
const deleteMeshTypeInfo = (meshTypeId: any) => {
  ElMessageBox.confirm(
    '确认删除吗?',
    '警告',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      axios.put('http://47.95.178.186:8000/SetLiGriddingRout/api/MeshType/FalseDeleteMestType?MeshTypeId=' + meshTypeId)
        .then(res => {
          if (res.data > 0) {
            ElMessage.success("删除成功");
            fetchData();
          }
          else {
            ElMessage.error("删除失败");
          }
        })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消删除',
      })
    })
}

//点击编辑调出弹出层反填
const BackMeshTypeInfo = async (meshTypeId: any) => {
  dialogVisible.value = true;

  axios.get("http://47.95.178.186:8000/GetLiGriddingRout/api/MeshType/BackMeshType?MeshTypeId=" + meshTypeId).then(res => {
    ruleForm.meshTypeId = res.data.meshTypeId
    ruleForm.meshTypeName = res.data.meshTypeName
    ruleForm.meshType = res.data.meshType
    ruleForm.majorType = res.data.majorType
    ruleForm.majorTypeArr = res.data.majorType.split(",")
  })
}



//关闭弹出层的确认提示
const handleClose = (done: () => void) => {
  ElMessageBox.confirm('确定要关闭弹出层吗?')
    .then(() => {
      done();

    })
    .catch(() => {
      // catch error
    })
}



</script>

<style scoped>
.container {
  /* 设置div居中对齐 */
  width: 100%;
  display: flex;
  justify-content: center;
}

.table-container {
  /* 设置table居中对齐 */
  display: flex;
  justify-content: center;
}
</style>